<template>
  <div class="detail-top">
    <div class="detail-img">
      <img
        src="https://y.qq.com/music/photo_new/T001R300x300M0000025NhlN2yWrP4.jpg?max_age=2592000"
        alt="周杰伦"
        class="singer-img"
      />
    </div>
    <div class="detail-desc">
      <h1>周杰伦</h1>
      <div class="singer-desc">
        <p>
          外文名：Jay Chou 别名：周董、President Chou 国籍：中国
          出生地：台湾省新北市 职业：音乐人、制作人、导演、企业家等
          出生日期：1979年1月18日（农历腊月二十）
          代表作品：《龙卷风》、《菊花台》、《青花瓷》、《晴天》...
        </p>
        <a href="#">[更多]</a>
        <a href="#">[举报]</a>
      </div>
      <ul class="singer-songs">
        <li class="song">
          <a href="#">
            <span class="song-color">单曲</span>
            <strong class="song-color">824</strong>
          </a>
        </li>
        <li class="song">
          <a href="#">
            <span class="song-color">专辑</span>
            <strong class="song-color">37</strong>
          </a>
        </li>
        <li class="song active">
          <a href="#">
            <span class="song-color">MV</span>
            <strong class="song-color">922</strong>
          </a>
        </li>
      </ul>
      <div class="play-songs">
        <el-button :icon="VideoPlay" class="btn-one"
          >播放歌手热门歌曲</el-button
        >
        <el-button :icon="Plus" class="btn-two">关注3469.7万</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'MDetail',
}
</script>

<script lang="ts" setup>
import { VideoPlay, Plus } from '@element-plus/icons-vue'
import { onMounted } from 'vue'
import { getSingerDescApi } from '@/api/singer/getSingerList'

onMounted(async () => {
  const result = await getSingerDescApi()
  console.log(result)
})
</script>

<style scoped>
.detail-top {
  margin: 40px 0 35px 0;
  display: flex;
  height: 250px;
}
.detail-img {
  width: 250px;
  margin-right: 55px;
  cursor: pointer;
}
.singer-img {
  display: inline-block;
  width: 250px;
  border-radius: 50%;
}
.detail-desc h1 {
  font-size: 38px;
  font-weight: 400;
  margin-top: 31px;
  height: 50px;
}
.singer-desc {
  display: flex;
  margin-bottom: 3px;
}
.singer-desc p {
  display: inline-block;
  font-size: 14px;
  width: 716px;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  padding-right: 5px;
}
.singer-desc a {
  display: inline-block;
  font-size: 14px;
  height: 50px;
  line-height: 50px;
}
.singer-desc a:hover {
  text-decoration: none;
  color: green;
}
.singer-songs {
  display: flex;
  height: 23px;
  margin-bottom: 25px;
}
.song {
  border-right: 1px solid #c9c9c9;
  line-height: 23px;
  margin-right: 20px;
  padding-right: 20px;
}
.song a:hover {
  text-decoration: none;
}
.song a:hover .song-color {
  color: green;
}
.song span {
  font-size: 18px;
  font-weight: 400;
  color: #000;
}

.song strong {
  height: 23px;
  font-size: 25px;
  margin-left: 10px;
  font-weight: 340;
  color: #000;
}
.active {
  border-right: none;
}
.play-songs {
  height: 38px;
}
.btn-one {
  height: 100%;
  background-color: #31c27c;
  color: #fff;
}
.btn-one:hover {
  background-color: #2caf6f;
}
.btn-two {
  height: 100%;
  color: #000;
}
.btn-two:hover {
  background-color: #e0e0e0;
  border-color: #fff;
}
</style>
